<template>
  <div class="container">
    我是响应式数据
    <div>--{{ obj.name }}--</div>
    <h4><button @click="btn">点击我改名</button></h4>
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    // 普通对象（静态，不能动态修改）,加上reactive变成响应式对象才可以
    // const obj = reactive{
    //   name: '老李',
    //   age: 30
    // }
    const obj = reactive({
      name: "老李",
      age: 30,
    });
    const btn = () => {
      obj.name = "老王";
      console.log(obj.name);
    };
    return { obj, btn };
  },
};
</script>